<script setup lang="ts">
import { onMounted, ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReUpload from "@/components/ReUpload/index.vue";
import { getCategoryAllList } from "@/api/learn/category";

interface ListItem {
  value?: number | string | undefined;
  label?: string | undefined;
  id?: number | string | undefined;
  name?: string | undefined;
}

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    categoryId: null,
    userId: null,
    name: "",
    image: "",
    recommended: "",
    introductory: "",
    content: "",
    fileList: [],
    categoryList: []
  })
});

const ruleFormRef = ref();
const uploadRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

function getUploadRef() {
  return uploadRef.value;
}

const options = ref<ListItem[]>([]);
const loading = ref(false);
const categoryList = ref<ListItem[]>([]);
// 检索
const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    options.value = categoryList.value.filter(item => {
      return item.name.toLowerCase().includes(query);
    });
    loading.value = false;
  } else {
    options.value = categoryList.value;
  }
};

onMounted(async () => {
  const res = await getCategoryAllList();
  categoryList.value = res.data.lists;
  options.value = res.data.lists;
});

defineExpose({ getRef, getUploadRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入名称"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="课程分类" prop="categoryId">
          <el-select
            v-model="newFormInline.categoryId"
            filterable
            remote
            reserve-keyword
            placeholder="请选择分类"
            remote-show-suffix
            :remote-method="remoteMethod"
            :loading="loading"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="简介" prop="content">
          <el-input
            v-model="newFormInline.content"
            :rows="4"
            type="textarea"
            clearable
            placeholder="请输入简介"
          />
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="图片" prop="fileList">
          <ReUpload
            ref="uploadRef"
            v-model:fileList="newFormInline.fileList"
            tableName="courses"
            accept=".jpg,.jpeg,.png,.gif"
            :businessId="newFormInline.id"
            tip="上传图片格式：jpg，jpeg，png"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
